<template>
  <el-card shadow="never">
    <template #header>
      <el-form label-width="80px" label-position="top">
        <el-row :gutter="24">
          <el-col :span="6" :xs="24">
            <el-form-item :label="$t('用户姓名')">
              <el-input v-model="page.name"/>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item :label="$t('手机号码')">
              <el-input v-model="page.phone"/>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item :label="$t('营销APP')">
              <el-select style="width: 100%" v-model="page.appId" clearable>
                <el-option v-for="item in productList" :key="item.appId" :label="item.appName"
                           :value="item.appId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item :label="$t('分单时间')">
              <el-date-picker
                  style="width: 100%"
                  v-model="page.distributeTime"
                  type="daterange"
                  range-separator="~"
                  value-format="x"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item :label="$t('注册时间')">
              <el-date-picker
                  style="width: 100%"
                  v-model="page.registerTime"
                  type="daterange"
                  range-separator="~"
                  value-format="x"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item :label="$t('申请时间')">
              <el-date-picker
                  style="width: 100%"
                  v-model="page.loanTime"
                  type="daterange"
                  range-separator="~"
                  value-format="x"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label-width="20px" style="margin-top:40px">
              <el-button type="primary" @click="getTableData">{{ $t('查询') }}</el-button>
              <el-button @click="resetSearch">{{ $t('重置') }}</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <Table :table-column="tableColumn" :tableData="tableData" :page="page"
           @handleCurrentChange="(val)=>{page.pageNum = val,getTableData()}"
           @handleSizeChange="(val)=>{page.pageSize = val,getTableData()}"
    >
      <template #phone="{row}">
        {{ encryptPhone(row.phone, 'phone') }}
      </template>
      <template #email="{row}">
        {{ encryptPhone(row.eMail, 'email') }}
      </template>
      <template #app="{row}">
        {{ encryptPhone(row.app, 'phone') }}
      </template>
    </Table>
  </el-card>
</template>

<script>
import {nextTick, onMounted, reactive, ref, toRefs} from 'vue'
import {selectProductList,} from "@/api";
import {dateFormatTimeStamp,} from "@/utils/index"
import i18n from "@/locale";
import {
  fetchHistoryList,
} from "@/api/market"

const $t = i18n.global.t
const tableColumn = [
  {label: $t('用户姓名'), prop: 'name', align: 'center', minWidth: 100},
  {label: $t('手机号码'), prop: 'phone', align: 'center', minWidth: 100, slot: 'phone'},
  {label: $t('邮箱'), prop: 'email', align: 'center', minWidth: 100, slot: 'email'},
  {label: $t('whatsAPP'), prop: 'app', align: 'center', minWidth: 100, slot: 'app'},
  {label: $t('分单时间'), prop: 'creationTime', align: 'center', minWidth: 150},
  {label: $t('申请时间'), prop: 'loanTime', align: 'center', minWidth: 150},
  {label: $t('注册时间'), prop: 'registerTime', align: 'center', minWidth: 150},
  {label: $t('营销APP'), prop: 'appName', align: 'center', minWidth: 100},
]
export default {
  name: "index",
  setup() {
    const state = reactive({
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      tableData: [],
      productList: [],
    })
    const methods = {
      async getTableData() {
        const [distributeTimeStart, distributeTimeEnd] = dateFormatTimeStamp(state.page.distributeTime)
        const [loanTimeStart, loanTimeEnd] = dateFormatTimeStamp(state.page.loanTime)
        const [registerTimeStart, registerTimeEnd] = dateFormatTimeStamp(state.page.registerTime)
        const params = {
          distributeTimeStart, distributeTimeEnd,
          loanTimeStart, loanTimeEnd,
          registerTimeStart, registerTimeEnd,
          ...state.page,
          distributeTime: null,
          loanTime: null,
          registerTime: null,
        }
        const res = await fetchHistoryList(params)
        if (res.code === 200) {
          const {list, total} = res.data
          state.tableData = list
          state.page.total = total
        }
      },
      resetSearch() {
        state.page = {
          pageNum: 1,
          pageSize: 10,
          total: 0
        }
        methods.getTableData()
      },
      getSelect() {
        selectProductList().then(res => {
          state.productList = res.data
        })
      },
      encryptPhone(value, type) {
        if (!value) return ""
        let newValue = ''
        if (type === 'phone') {
          newValue = value.substr(0, 3) + '*******'
        } else {
          const str = value.split("@")
          newValue = str[0].substr(0, str[0].length - (str[0].length - 3)) + "*****" + '@' + str[1]
        }
        return newValue
      }
    }
    onMounted(() => {
      methods.getTableData()
      methods.getSelect()
    })
    return {
      tableColumn,
      ...methods,
      ...toRefs(state)
    }
  }
}
</script>

<style scoped>

</style>
